<template>
  <div class="box">
    <header class="header">
      <div class="left">
        <van-icon @click="$router.push('/kind')" name="apps-o" size="18"/>
      </div>
      <div class="centerbox">
        <div class="searchbox" @click="$router.push('/search')">机顶盒</div>
      </div>
      <div class="right">
        <router-link style="color: #fff" to="/user" v-if="loginState" class="iconfont icon-wode"></router-link>
        <router-link style="color: #fff" to="/login" v-else>登录</router-link>
      </div>
    </header>
    <div class="content" ref="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item of bannerList" :key="item.bannerid">
            <van-image
              :src="item.img"
            />
          </van-swipe-item>
        </van-swipe>
        <!-- nav导航 -->
        <van-grid column-num="5" :border="false">
          <van-grid-item icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png.webp" text="嗨购超市" />
          <van-grid-item icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png.webp" text="数码电器" />
          <van-grid-item icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png.webp" text="嗨购服饰" />
          <van-grid-item icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png.webp" text="嗨购生鲜" />
          <van-grid-item icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png.webp" text="嗨购到家" />
          <van-grid-item icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png.webp" text="充值缴费" />
          <van-grid-item icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/150351/19/14167/6853/5fed882dE195ef673/b2aa7d67e675baf8.png.webp" text="9.9元拼" />
          <van-grid-item icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png.webp" text="领券" />
          <van-grid-item icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/131663/33/3380/3674/5efbf50fEf79cf314/af4b57d2383e605d.png.webp" text="领津贴" />
          <van-grid-item icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png.webp" text="PLUS会员" />
        </van-grid>
        <!-- 秒杀列表 -->
        <van-divider>秒杀列表</van-divider>
        <ul class="seckillList">
          <li v-for="item of seckillList" :key="item.proid">
            <van-image :src="item.img1"></van-image>
            <p>¥{{ (item.originprice * item.discount / 10).toFixed(1) }}</p>
            <p><del>¥{{ item.originprice }}</del></p>
          </li>
        </ul>
        <!-- 推荐列表 -->
        <van-divider>推荐列表</van-divider>
        <!-- <ul class="prolist col_1"> -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="我也有底线的"
          @load="onLoad"
        >
          <ul :class="num === 1 ? 'prolist col_1' : 'prolist col_2'">
            <!-- <li class="proitem" v-for="(item, index) of recommendList" :key="item.proid">
              <div class="itemImage">
                <img :src="item.img1" alt="">
              </div>
              <div class="itemInfo">
                <p>{{index}} - {{ item.proname }}</p>
                <p>{{ item.originprice }}</p>
              </div>
            </li> -->
            <router-link tag="li" :to="'/detail?proid=' + item.proid"  class="proitem" v-for="(item, index) of recommendList" :key="item.proid">
              <div class="itemImage">
                <img :src="item.img1" alt="">
              </div>
              <div class="itemInfo">
                <p>{{index}} - {{ item.proname }}</p>
                <p>{{ item.originprice }}</p>
              </div>
            </router-link>
            <!-- <li class="proitem">
              <div class="itemImage">
                <img src="" alt="">
              </div>
              <div class="itemInfo">
                <p>标题</p>
                <p>价格</p>
              </div>
            </li> -->
          </ul>
        </van-list>
        <div class="state">
          <van-icon v-if="num === 1" color="#999" name="apps-o" size="24" @click="changeNum(2)"/>
          <van-icon v-else color="#999" name="points" size="24" @click="changeNum(1)"/>
        </div>
        <div class="backtop" @click="backtop" v-if="flag">
          <van-icon name="back-top" size="24" color="#999"/>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Image as VanImage, Grid, GridItem, Divider, Icon, List, PullRefresh } from 'vant'
import { getBannerList, getSeckilllist, getRecommendlist } from '@/api/home'
import { mapState } from 'vuex'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Divider)
Vue.use(Icon)
Vue.use(List)
Vue.use(PullRefresh)
export default {
  computed: {
    ...mapState({
      loginState: ({ user }) => user.loginState
    })
  },
  data () {
    return {
      bannerList: [],
      seckillList: [],
      recommendList: [],
      num: 1,
      loading: false,
      finished: false,
      count: 2,
      flag: false, // 控制返回顶部的显示和隐藏
      isLoading: false
    }
  },
  methods: {
    onRefresh () {
      this.isLoading = true
      getRecommendlist().then(res => {
        this.isLoading = false
        this.recommendList = res.data.data
        this.count = 2
        this.finished = false
      })
    },
    backtop () {
      this.$refs.content.scrollTop = 0
    },
    onLoad () {
      this.loading = true
      getRecommendlist({ count: this.count }).then(res => {
        console.log(res.data)
        this.loading = false
        if (res.data.data.length === 0) { // 没有数据了
          this.finished = true
        } else {
          // 合并数据
          this.recommendList = [...this.recommendList, ...res.data.data]
          this.count++
        }
      })
    },
    changeNum (num) {
      this.num = num
    },
    getScrollTop () {
      this.flag = this.$refs.content.scrollTop > 300
    }
  },
  mounted () {
    getBannerList().then(res => {
      console.log(res.data)
      this.bannerList = res.data.data
    })
    getSeckilllist().then(res => {
      console.log(res.data)
      this.seckillList = res.data.data
    })
    getRecommendlist().then(res => {
      this.recommendList = res.data.data
      // 监听滚动条的滚动
      this.$refs.content.addEventListener('scroll', this.getScrollTop, false)
    })
  }
}
</script>
<style lang="stylus" scoped>
.van-grid-item__content
  background-color #efefef
.my-swipe
  max-height 150px
  overflow hidden
.seckillList
  width 96%
  margin 0px 2% 10px
  padding 8px 0
  border-radius 8px
  display flex
  background-color #fff
  li
    flex 1
    .van-image
      height 50px
      width 100%
      img
        width 90%
        margin 5%
    p
      text-align center
      &:nth-child(2)
        color #ff6666
      &:nth-child(3)
        color #999

.prolist
  .proitem
    background-color #fff
    display flex
    height 1.2rem
    .itemImage
      width 1.2rem
      height 1.2rem
      img
        width 1.1rem
        height 1.1rem
        margin 0.05rem
        display block
        // border 1px solid #ccc
    .itemInfo
      padding 5px 10px
      p
        color #333
  &.col_2
    display flex
    flex-wrap wrap
    .proitem
      width 48%
      height 2.4rem
      margin 5px 1%
      display block
      .itemImage
        width 100%
        height 1.5rem
        border 1px solid #ccc
        img
          width 100%
          margin 0
          height 1.5rem
          display block
.state
  width 40px
  height 40px
  background-color #fff
  box-shadow 0 0 3px #666
  border-radius 50%
  position fixed
  bottom 60px
  right 10px
  display flex
  justify-content center
  align-items center
.backtop
  width 40px
  height 40px
  background-color #fff
  box-shadow 0 0 3px #666
  border-radius 50%
  position fixed
  bottom 110px
  right 10px
  display flex
  justify-content center
  align-items center
.header
  display flex
  color #fff
  .left
    width 60px
    display flex
    justify-content center
    align-items center
  .centerbox
    flex  1
    display flex
    justify-content center
    align-items center
    .searchbox
      width 100%
      height 30px
      background-color #fff
      border-radius 15px
      text-indent 24px
      line-height 30px
      color #999
  .right
    display flex
    justify-content center
    align-items center
    width 60px
    color #fff
</style>
